<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Website Ad Cleaner</title>
		<link href="/static/lib/bootstrap.css" rel="stylesheet">
		<link href="/static/lib/bootstrap-table.min.css" rel="stylesheet">
		<link href="/static/lib/font-awesome.min.css" rel="stylesheet">
		<link href="/static/css/popup.css" rel="stylesheet">
		<script type="text/javascript" src="/static/lib/jquery.min.js"></script>
		<script type="text/javascript" src="/static/lib/bootstrap.min.js"></script>
		<script type="text/javascript" src="/static/lib/bootstrap-table.min.js"></script>
	</head>
	<body>
		<body>
			<div id="app" class="d-flex flex-column h-100" style="width: 270px;"><!---->
				<div data-v-1="" class="Page">
					<a data-v-1="" href="#" style="position: absolute; top: -100px;">.</a>
					<div data-v-1="" class="health-overlay health3"></div>
					<div data-v-2="" class="SideMenu hidden">
						<div class="overlay"></div>
						<div>
							<div id="rules_modal_outer">
								<div id="rules_dialog" role="dialog" class="modal fade">
									<div class="modal-dialog modal-md">
										<div tabindex="-1" role="document" aria-labelledby="rules_modal_header"
											aria-describedby="rules_modal_body" class="modal-content">
											<header id="rules_modal_header" class="modal-header">
												<h5 class="modal-title">规则列表</h5>
												<button id="rules_modal_close" type="button" aria-label="Close"
													class="close">×</button>
											</header>
											<div id="rules_modal_body" class="modal-body">
												<div class="SettingsModalContent ModalContent">
													<form>
														<div class="form-group">
															<div class="editor">
																<button id="rules_btn_add" type="button"
																	class="btn btn-info">添加规则</button>
																<table id="table" data-click-to-select="true"
																	data-pagination="true" data-page-size="5">
																</table>
															</div>
														</div>
													</form>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div id="rules_modal_backdrop" class="modal-backdrop fade show" style="display: none;">
								</div>
							</div>
						</div>
					</div>


					<div data-v-1="" class="top-bar">
						<a data-v-1="" id="top-bar-setting" class="btn btn-link">
							<i data-v-1="" class="fa fa-bars"></i>
						</a>
						<div data-v-1="" class="HealthField health">
						</div>
					</div>
					<div data-v-1="" class="body">
						<div data-v-1="" class="container-fluid px-4 pt-4" style="">
							<div data-v-1="" class="mode-title text-center">
								<h3 data-v-1="">
									网站广告清理工
								</h3>
							</div>
							<div data-v-1="" class="rules">
								<div>
									使用规则如下：
								</div>
								<div>
									第一部分为网站首页地址
									<br>
									（如 https://xyz.com）
								</div>
								<div>
									第二部分为广告dom元素选择器
									<br>
									（如#id,.css,div[attr]）
								</div>
							</div>
							<div data-v-1="" class="mode-toggle text-center">
								<div data-v-1="" class="btn-group border border-primary">
									<button data-v-1="" id="openBtn" class="btn">
										<i data-v-1="" class="fa fa-power-off"></i> 开启
									</button>
									<button data-v-1="" id="closeBtn" class="btn" disabled="disabled">
										关闭
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="StatusBar">
					<a href="#" class="home">lesswork.top</a>
					<a href="#" class="feedback" role="button">
						<i class="fa fa-envelope-o"></i>
					</a>
					<div class="version">1.0</div>
				</div>
			</div>

			<div class="modal fade" id="rules_modal_add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
				aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title" id="myModalLabel">添加规则</h4>
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						</div>
						<div class="modal-body">

							<div class="input-group mb-3">
								<div class="input-group-prepend">
									<span class="input-group-text" id="rules-form-url">网址</span>
								</div>
								<input type="text" class="form-control" id="rules-form-url-input"
									placeholder="需要处理的网址前缀,例如(http://www.baidu.com)" aria-label="url"
									aria-describedby="rules-form-url">
							</div>

							<label for="rules-form-elem" id="rules-form-elem-label">需要处理的元素：</label>
							<div class="input-group mb-3">
								<input type="text" class="form-control" id="rules-form-elem" placeholder="输入要处理的元素选择器"
									aria-label="elem" aria-describedby="rules-btn-elem-add">
								<div class="input-group-append">
									<button class="btn btn-outline-secondary" type="button"
										id="rules-btn-elem-add">添加</button>
								</div>
							</div>
							<input type="hidden" id="rules-form-elem-val">
							<input type="hidden" id="rules-form-elem-id">
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-primary" id="rules-btn-save">保存</button>
						</div>
					</div>
				</div>
			</div>

			<script type="text/javascript" src="/scripts/popup.js"></script>

		</body>
	</body>
</html>